<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="450"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // --- Main Drawing Function ---
    function drawDiagram() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Define coordinates and dimensions
        const tableX = 350;
        const tableY = 200;
        const block2Width = 80;
        const block2Height = 80;
        const block1Width = 70;
        const block1Height = 70;
        const pulleyRadius = 30;

        // Calculate dependent positions
        const block2X = 140;
        const block2Y = tableY - block2Height;
        const stringY = block2Y + block2Height / 2;
        const pulleyCenterX = tableX;
        const pulleyCenterY = stringY - pulleyRadius; // Pulley sits on the corner, tangent to table

        // 1. Draw the table/surface
        drawSurface(50, tableY, tableX, 380);

        // 2. Draw Block 2
        drawBlock(block2X, block2Y, block2Width, block2Height, '2');

        // 3. Draw the Pulley
        drawPulley(pulleyCenterX, pulleyCenterY, pulleyRadius);

        // 4. Draw Block 1 and the string
        drawRopeAndBlock1(block2X, stringY, pulleyCenterX, pulleyCenterY, pulleyRadius, block1Width, block1Height, '1');

        // 5. Draw the label
        drawLabel('题 4 图', canvas.width / 2, 420);
    }

    // --- Helper Functions ---

    function drawSurface(startX, y, cornerX, endY) {
        ctx.beginPath();
        ctx.moveTo(startX, y);
        ctx.lineTo(cornerX, y);
        ctx.lineTo(cornerX, endY);
        ctx.stroke();

        // Draw hatching for the surface
        const hatchLength = 10;
        const hatchSpacing = 15;

        // Horizontal surface hatching
        for (let x = startX + hatchSpacing; x < cornerX; x += hatchSpacing) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x - hatchLength, y + hatchLength);
            ctx.stroke();
        }

        // Vertical surface hatching
        for (let yPos = y + hatchSpacing; yPos < endY; yPos += hatchSpacing) {
            ctx.beginPath();
            ctx.moveTo(cornerX, yPos);
            ctx.lineTo(cornerX - hatchLength, yPos + hatchLength);
            ctx.stroke();
        }
    }

    function drawBlock(x, y, width, height, label) {
        ctx.beginPath();
        ctx.rect(x, y, width, height);
        ctx.stroke();

        // Draw label inside the block
        ctx.font = '36px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(label, x + width / 2, y + height / 2);
    }

    function drawPulley(cx, cy, radius) {
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
        ctx.stroke();
        // Draw the axle pin
        ctx.beginPath();
        ctx.moveTo(cx - radius * 0.5, cy + radius * 0.5);
        ctx.lineTo(cx + radius * 0.5, cy - radius * 0.5);
        ctx.stroke();
    }

    function drawRopeAndBlock1(b2x, sy, pcx, pcy, pr, b1w, b1h, label1) {
        ctx.beginPath();
        // Horizontal part of the rope
        ctx.moveTo(b2x + 80, sy); // block2Width is 80
        ctx.lineTo(pcx, sy);

        // Arc around the pulley
        ctx.arc(pcx, pcy, pr, 0, Math.PI / 2);

        // Vertical part of the rope
        const block1AttachY = pcy + pr + 80;
        const block1AttachX = pcx + pr;
        ctx.lineTo(block1AttachX, block1AttachY);
        ctx.stroke();

        // Draw Block 1
        const block1X = block1AttachX - b1w / 2;
        const block1Y = block1AttachY;
        drawBlock(block1X, block1Y, b1w, b1h, label1);
    }

    function drawLabel(text, x, y) {
        ctx.font = '30px "Songti SC", "SimSun", serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, x, y);
    }

    // --- Initial Call ---
    drawDiagram();

</script>

</body>
</html>